<template>
    <div class="app-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="VPN服务管理" name="first"> </el-tab-pane>
            <el-tab-pane label="账号集中管理" name="second"> </el-tab-pane>
        </el-tabs>
        <!-- vpn服务管理 -->
        <vpnServiceManagement v-if="activeName == 'first'" />
        <!-- 账号集中管理 -->
        <vpnAccountmanagement v-if="activeName == 'second'" />

    </div>
</template>
  
<script>
import vpnServiceManagement from "./vpnServiceManagement/index.vue";
import vpnAccountmanagement from "./vpnAccountmanagement/index.vue";
export default {
    data() {
        return {
            activeName: "first",
        };
    },
    components: {
        vpnServiceManagement,
        vpnAccountmanagement,
    },
    watch: {
        // 监视路由变化
        "$route.query.activeName": {
            immediate: true,
            handler() {
                this.activeName = this.$route.query.activeName ? this.$route.query.activeName : 'first';
            },
        },
    },
    methods: {
        handleClick(tab, event) {
        },
    },
    mounted() {
    },
};
</script>
  
<style lang="scss" scoped></style>